<template>
  <div class="meta-right" @click="showSel = false;showTypeSel = false">
    <div class="meta-top">
      <div class="meta-top-box">
        <div>{{$t('user.pETHbalance')}}</div>
        <div>{{pethBalance?utils.weiOneth(pethBalance).toFixed(4):0}}</div>
      </div>
      <div class="meta-top-box">
        <div>
          <span>{{$t('user.ETHchangeablebalance')}}</span>
          <a-tooltip>
            <template slot="title">
              {{$t('user.ETHchangeablebalanceExplain')}}
            </template>
            <img @click="jumpRule" src="../assets/board-icon-what.svg" alt="">
          </a-tooltip>
        </div>
        <div v-if="userId != 1">{{pethQuota == '∞'?pethQuota:utils.weiOneth(pethQuota)}}</div>
        <div v-else>∞</div>
      </div>
      <div :class="userId?'meta-top-btn opacity3':'meta-top-btn'" @click="exchangeCli">
        <img src="../assets/board-icon-change.svg" alt="">
        <span>{{$t('user.ExchangeETH')}}</span>
      </div>
    </div>
    <div class="meta-plant">
      <div v-for="(val,index) in list">
        <metaPlant @loadEdit="loadEdit" @jumpSuc="jumpSuc" :billBoardNum="billBoardNum" :mapVal="val" :GetUserGradeProfit="GetUserGradeProfit" :level="level" :editTextMenu="editTextMenu[index]" :id="billboardId"></metaPlant>
      </div>
    </div>
    <div class="meat-icon">
      <img class="marginright10 marginleft14" src="../assets/icon-list-extra.svg" alt="">
      <span class="marginright33">-{{$t('user.extra')}}</span>
      <img class="marginright10" src="../assets/icon-list-warn.svg" alt="">
      <span class="marginright33">-{{$t('user.loss')}}</span>
      <img class="marginright10" src="../assets/icon-list-buy.svg" alt="">
      <span class="marginright33">-{{$t('user.buy')}}</span>
      <img class="marginright10" src="../assets/icon-list-profit.svg" alt="">
      <span>-{{$t('user.earnings')}}</span>
    </div>
    <div class="meta-middle">
      <div class="meta-type-select">
        <div class="meta-select-menu" @click.stop="showTypeSel = !showTypeSel">
          <span>{{typeMenuSel}}</span>
          <img src="../assets/board-icon-select.svg" alt="">
        </div>
        <div class="meta-select-down" v-if="showTypeSel">
          <div v-for="val in typeMenu" @click="typeSelCli(val)">{{val.name}}</div>
        </div>
      </div>
      <div class="meta-select">
        <div class="meta-select-menu" @click.stop="showSel = !showSel">
          <span>{{selLevel?selLevel:boardLevel}}</span>
          <img src="../assets/board-icon-select.svg" alt="">
        </div>
        <div class="meta-select-down" v-if="showSel">
          <div v-for="val in levelMenu" @click="selCli(val)">{{val.name}}</div>
        </div>
      </div>
    </div>
    <div class="meta-tab">
      <a-table :columns="columns" :pagination="false" :data-source="dataList">
        <template slot="price" slot-scope="text, record">
          <div>
            {{utils.weiOneth(record.price)}} ETH/ $ {{(utils.weiOneth(record.price) * (usdtPrice > 0?usdtPrice:1)).toFixed(2)}}
          </div>
        </template>
        <template slot="type" slot-scope="text, record">
          <img v-if="record.type == 1" src="../assets/icon-list-buy.svg" alt="">
          <img v-if="record.type == 2" src="../assets/icon-list-profit.svg" alt="">
          <img v-if="record.type == 3" src="../assets/icon-list-extra.svg" alt="">
          <img v-if="record.type == 4" src="../assets/icon-list-warn.svg" alt="">
        </template>
      </a-table>
      <div class="meta-pagination">
        <a-pagination v-model="current" :total="total" show-less-items @change="onChange"/>
      </div>
    </div>
    <popup v-if="showpopup" :data="dataProp" @close="close"></popup>    
    <spin v-if="showSpin"></spin>
  </div>
</template>

<script>
  import metaPlant from '../components/public/metaPlant.vue'
  import popup from '../components/public/popup.vue'
  import spin from '../components/public/spin'
  import Web3 from 'web3'
export default {
  name: 'metaboardRight',
  data () {
    return {
      showSpin:false,
      showpopup:false,
      dataProp:{type:2,numMore:0,wonNumMore:0},
      list:[
        {num:1,money:0.5},
        {num:2,money:1},
        {num:3,money:2},
        {num:4,money:4},
        {num:5,money:8},
        {num:6,money:16},
      ],
      showSel:false,
      showTypeSel:false,
      dataList:[],
      current:1,
      total: 0,
      level:0,
      pethBalance:'',
      pethQuota:0,
      losed:'',
      selLevel:'',
      GetUserGradeProfit:{
        GradeProfit:[],                //分级收益
        GradeExtraProfit:[],                //分级额外收益
        GradeLostedProfit:[]           //分级损失
      },
      userAddress:'',
      editTextMenu:[],
      billboardId:0,
      userId:'',
      typeMenuSel:'',
      typeIndexSel:1,
      usdtPrice:0,                      //eth/usdt交易对价格
      billBoardNum:[],
    }
  },  
  components:{metaPlant,popup,spin},
  mounted() {
    var that = this;
    that.getETHusdt();
    that.typeMenuSel = that.$t('user.buy');
    if (typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
    } else {
      web3 = new Web3(new Web3.providers.HttpProvider(this.utils.HttpProviderIp));
    } 
    var contractAbi = that.utils.tranAbi;
    var contractAddress = that.utils.addressVal;  //合约地址
    var userAddress,id = that.$route.params.id;      
    var myContract = new web3.eth.Contract(contractAbi, contractAddress, {
      from: that.utils.tranPersonVal, // default from address
      // gasPrice: '10000000000' // default gas price in wei, 10 gwei in this case
    }); 
    if(id){
      if(id.length!=42){
        that.userId = id;
        myContract.methods.PETH_ID_To_Address(id).call(function(error, result1){
          that.userAddress = result1;
          that.myContractCheck(myContract);
        })
      }else{
        that.userAddress = id;
        that.myContractCheck(myContract);
      }
    }else{        
      ethereum.enable().then((accounts)=>{
        ///---获取账户------------------------------------///
        const account = accounts[0];         
        that.userAddress = accounts[0]; 
        that.myContractCheck(myContract);
      })
    }
  },
  computed: {    
    boardLevel(){
      return this.$t('user.level')
    },
    levelMenu(){
      return [
        {name:'All'},
        {name:'1'},
        {name:'2'},
        {name:'3'},
        {name:'4'},
        {name:'5'},
        {name:'6'},
      ]
    },
    typeMenu(){
      return [
        {name:this.$t('user.buy'),type:1},
        {name:this.$t('user.earnings'),type:2},
        {name:this.$t('user.extra'),type:3},
        {name:this.$t('user.loss'),type:4},
      ]
    },
    columns(){
      return [
        {
          title: this.$t('user.type'),
          dataIndex: 'type',
          key: 'type',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: this.$t('user.date'),
          dataIndex: 'eventTime',
          key: 'eventTime',
        },
        {
          title: this.$t('user.Tradinghash'),
          dataIndex: 'hash',
          key: 'hash',
        },
        {
          title: this.$t('user.level'),
          dataIndex: 'level',
          key: 'level',
        },
        {
          title: 'ETH/USD',
          dataIndex: 'price',
          key: 'price',
          scopedSlots: { customRender: 'price' },
        },
      ]
    }
  },
  methods:{
    //初始化数据
    myContractCheck(myContract){
      var that = this;
      that.tableInit(that.userAddress);
      that.getbillboard(that.userAddress);
      that.checkbillboard(that.userAddress); 
      myContract.methods.balanceOf(that.userAddress).call(function(error, res){
        that.pethBalance = res;
        that.dataProp.numMore = res;
      });
      myContract.methods.GetUserGradeProfit(that.userAddress).call(function(error, res){
        that.GetUserGradeProfit.GradeProfit = res[0];
        that.GetUserGradeProfit.GradeExtraProfit = res[1];
        that.GetUserGradeProfit.GradeLostedProfit = res[2];
      });
      myContract.methods.GetUserInfo(that.userAddress).call(function(error, result){
        that.$nextTick(() => {
          that.level = result[3];
          if(that.level>=6){
            that.pethQuota = '∞';
          }else{
            that.pethQuota = result[1];
          }
          that.dataProp.wonNumMore = that.pethQuota;
          that.losed = result[4];
        })
        // that.list[result[3]].losed = result[4];
      });
    },
    //获取trx-usdt交易对
    getETHusdt(){
      this.$http.get(this.utils.config+'/metapool/other/eth_usdt').then((res)=>{
        this.usdtPrice = res.data.data.price;
      })
    },
    //每个广告牌的下线人数
    getbillboard(address){
      var that = this;
      that.billBoardNum = [];
      var time = (new Date()).valueOf();
      that.$http.get(that.utils.config+'/metapool/user/level_offline/'+address+'?timestamp='+time+'&token='+that.$md5(address+'WwFEhq4hgK4yBtWmtKYMvyea95'+time)).then((res)=>{
        var list = res.data.data;
        for(let key  in list){
          that.billBoardNum.push(list[key]);
        }
      })
    },
    //表格数据
    tableInit(address){
      var level = this.selLevel=='All'?'':this.selLevel;
      var time = (new Date()).valueOf();
      this.$http.get(this.utils.config+'/metapool/user/income/'+address+'?timestamp='+time+'&token='+this.$md5(address+'WwFEhq4hgK4yBtWmtKYMvyea95'+time)+'&level='+level+'&type='+this.typeIndexSel+'&currentPage='+this.current+'&pageSize=10').then((res)=>{
        this.current = res.data.data.currentPage;
        this.total = res.data.data.totalSize;
        this.dataList = res.data.data.data;
      })
    },
    //跳转到规则页面
    jumpRule(){
      this.$router.push('/metaboardRule');
    },
    //查询区块交易是否成功
    jumpSuc(data){
      var that = this;
      that.showSpin = true;
      var myContract = new web3.eth.Contract(that.utils.tranAbi, that.utils.addressVal, {
          from: that.utils.tranPersonVal, // default from address
          // gasPrice: '10000000000' // default gas price in wei, 10 gwei in this case
      }); 
      var setIn=setInterval(()=>{
        web3.eth.getTransactionReceipt(data).then((res)=>{
          if(res && res.status){
            clearInterval(setIn);
            that.showSpin = false;
            that.myContractCheck(myContract);            
          }
        })
      },1000)
    },
    //编辑广告牌后刷新
    loadEdit(data){
      this.checkbillboard(data);
      this.getbillboard(data);
    },
    //查询广告牌内容
    async checkbillboard(account){
      var that = this;  
      that.editTextMenu = [];
      var time = (new Date()).valueOf();
      that.$http.get(that.utils.config+'/metapool/ad/pk_ad/'+account+'?timestamp='+time+'&token='+that.$md5(account+'WwFEhq4hgK4yBtWmtKYMvyea95'+time)).then((res)=>{
        var list  = res.data.data;
        that.billboardId = list.id;
        that.editTextMenu.push(list.level1);
        that.editTextMenu.push(list.level2);
        that.editTextMenu.push(list.level3);
        that.editTextMenu.push(list.level4);
        that.editTextMenu.push(list.level5);
        that.editTextMenu.push(list.level6);
      })
    },
    typeSelCli(val){
      this.typeMenuSel = val.name;
      this.typeIndexSel = val.type;
      this.showTypeSel = false;      
      this.tableInit(this.userAddress);
    },
    selCli(val){
      this.selLevel = val.name;
      this.showSel = false;
      this.tableInit(this.userAddress);
    },
    onChange(current) {
      this.current = current;
      this.tableInit(this.userAddress);
    },
    //关闭弹框
    close(data){
      this.showpopup = false;
    },
    //一件兑换ETH
    exchangeCli(){
      this.showpopup = true;
    }
  }
}
</script>

<style scoped lang="scss">
.opacity3{
  opacity: .8;
  pointer-events: none!important;
}
.marginright10{
  margin-right: 10px;
}
.marginright33{
  margin-right: 33px;
}
.marginleft14{
  margin-left: 14px;
}
.meta-tab /deep/ .ant-table-content>.ant-table-placeholder{
  background-color: #141414;
  border:none;
  .ant-empty-description{
    color: rgba(255,255,255,0.5);
  }
}
.meta-pagination /deep/ .ant-pagination-item-active{
  border: 1px solid #EFB133;
}
.meta-pagination /deep/ .ant-pagination-item-active:focus, .ant-pagination-item-active:hover{
  border: 1px solid #EFB133;
}
.meta-pagination /deep/ .ant-pagination-item:focus{
  border: 1px solid #EFB133!important;
}
@media only screen and (min-width: 0px) and (max-width: 639px){
  .meta-pagination /deep/ .ant-pagination-item-link{
    background-color: #2E2E2E!important;
    border-radius:2px;
    border:none!important;
  }
  .meta-pagination /deep/ .anticon{
    color:rgba(255, 255, 255, .5)!important;
  }
  .meta-pagination /deep/ .ant-pagination-item{
    background-color: #2E2E2E!important;
    /* border:none!important; */
    >a{
      color:rgba(255, 255, 255, .65)!important;
    }
  }
  .meta-tab{
    width: 100%;
    overflow-x: scroll;
    
  }
  .meta-tab /deep/ .ant-table-wrapper{
    width: 600px;
  }
  .meta-tab /deep/ .ant-table-thead{
    border-radius: 6px  6px  0px  0px;
  }
  .meta-tab /deep/ .ant-table-thead > tr >th{
    background-color: #202020!important;
    font-size: 14px!important;
    color: rgba(255, 255, 255, .5)!important;
    font-weight: bold!important;
    border: none!important;
  }
  .meta-tab /deep/ .ant-table-tbody > tr > td{
    border:none!important;
    background-color: #313131!important;
    font-size: 12px!important;
    color: rgba(255, 255, 255, .7)!important;
  }
  .meta-tab /deep/ .ant-table-tbody > tr:nth-child(2n) > td{
    background-color: #272727!important;
  }
  .meta-right{
    width: 100%;
    background-color: #000;
    padding: 30px;
  }
  .meta-plant{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    >div{
      width: 100%;
      margin-bottom: 20px;
    }
  }  
  .meta-pagination{
    padding-top: 54px;
    padding-bottom: 39px;
  }
  .meat-icon{
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    text-align: left;
    margin-top: 25px;
    img{
      width: 24px;
      margin-bottom: 5px;
    }
    >img:nth-child(7){
      margin-left: 14px;
    }
  }
  .meta-middle{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-bottom: 30px;
    .meta-type-select,.meta-select{
      width: 270px;
      height: 38px;
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
      position: relative;
      margin-top: 15px;
      >.meta-select-menu{
        padding: 0px 17px;
        line-height: 38px;
        display: flex;
        justify-content: space-between;
        border: 1px solid #979797;
        border-radius: 6px;
        img{
          width: 16px;
          height: 16px;
          position: relative;
          top: 12px;
        }
      }
      >.meta-select-down{
        position: absolute;
        top: 40px;
        left: 0px;
        width: 100%;
        z-index: 100;
        background-color: #444444;
        border-radius: 0px 0px 5px 5px;
        >div{
          width: 100%;
          height: 38px;
          line-height: 38px;
          padding: 0px 17px;
          cursor: pointer;
        }
        >div:hover{
          background-color: #383737;
          color: rgba(239, 177, 51, .5);
        }
      }
    }
  }
  .meta-top{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    .meta-top-box{
      width: 100%;
      height: 44px;
      line-height: 20px;
      border: 1px solid #979797;
      border-radius: 6px;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      >div:nth-child(1){
        font-size: 14px;
        img{
          width: 13px;
          margin-left: 8px;
          position: relative;
          top: 4px;
        }
      }
      >div:nth-child(2){
        font-size: 22px;
      }
    }    
    >.meta-top-btn{
        width: 186px;
        height: 44px;
        margin: 0 auto;
        line-height: 44px;
        background-color: #EFB133;
        border-radius: 6px;
        font-size: 14px;
        padding: 0px 36px;
        color: #000;
        img{
          margin-right: 8px;
          width: 16px;
          position: relative;
          top: 14px;
        }
      }
  }
}


@media only screen and (min-width: 640px) {  
  .meta-pagination /deep/ .ant-pagination-item-link{
    background-color: #2E2E2E!important;
    border-radius:2px;
    border:none!important;
  }
  .meta-pagination /deep/ .anticon{
    color:rgba(255, 255, 255, .5)!important;
  }
  .meta-pagination /deep/ .ant-pagination-item{
    background-color: #2E2E2E!important;
    /* border:none!important; */
    >a{
      color:rgba(255, 255, 255, .65)!important;
    }
  }
  .meta-tab /deep/ .ant-table-thead{
    border-radius: 6px  6px  0px  0px;
  }
  .meta-tab /deep/ .ant-table-thead > tr >th{
    background-color: #202020!important;
    font-size: 16px!important;
    color: rgba(255, 255, 255, .5)!important;
    font-weight: bold!important;
    border: none!important;
  }
  .meta-tab /deep/ .ant-table-tbody > tr > td{
    border:none!important;
    background-color: #313131!important;
    font-size: 14px!important;
    color: rgba(255, 255, 255, .7)!important;
  }
  .meta-tab /deep/ .ant-table-tbody > tr:nth-child(2n) > td{
    background-color: #272727!important;
  }
  .meta-right{
    width: 100%;
    background-color: #000;
    padding: 30px;
  }
  .meta-plant{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    >div{
      width: 30%;
      height: 230px;
      margin-bottom: 20px;
    }
  }  
  .meta-pagination{
    padding-top: 54px;
    padding-bottom: 39px;
  }
  .meat-icon{
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    text-align: left;
    margin-top: 25px;
    img{
      width: 24px;
    }
  }
  .meta-middle{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 48px;
    margin-bottom: 30px;
    .meta-type-select{
      margin-right: 30px;
    }
    .meta-type-select,.meta-select{
      width: 270px;
      height: 38px;
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
      position: relative;
      >.meta-select-menu{
        padding: 0px 17px;
        line-height: 38px;
        display: flex;
        justify-content: space-between;
        border: 1px solid #979797;
        border-radius: 6px;
        img{
          width: 16px;
          height: 16px;
          position: relative;
          top: 12px;
        }
      }
      >.meta-select-down{
        position: absolute;
        top: 40px;
        left: 0px;
        width: 100%;
        z-index: 100;
        background-color: #444444;
        border-radius: 0px 0px 5px 5px;
        >div{
          width: 100%;
          height: 38px;
          line-height: 38px;
          padding: 0px 17px;
          cursor: pointer;
        }
        >div:hover{
          background-color: #383737;
          color: rgba(239, 177, 51, .5);
        }
      }
    }
  }
  .meta-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .meta-top-box{
      width: 40%;
      height: 44px;
      line-height: 20px;
      border: 1px solid #979797;
      border-radius: 6px;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      >div>img{
        cursor: pointer;
      }
      >div:nth-child(1){
        font-size: 14px;
        img{
          width: 13px;
          margin-left: 8px;
          position: relative;
          top: 4px;
        }
      }
      >div:nth-child(2){
        font-size: 22px;
      }
    }    
    >.meta-top-btn{
        width: 14%;
        min-width: 156px;
        height: 44px;
        line-height: 44px;
        background-color: #EFB133;
        border-radius: 6px;
        font-size: 14px;
        padding: 0px 36px;
        color: #000;
        img{
          margin-right: 8px;
          width: 16px;
          position: relative;
          top: 14px;
        }
      }
  }
}

</style>
